/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, {Component} from 'react';
import {
    Text,
    View,
    StyleSheet,
    ScrollView,
    TouchableOpacity,
} from 'react-native';

import RNBluetoothPrinter from '@react-native-bluetooth-printer'

const Button = ({title, onPress, style, titleStyle}) => <TouchableOpacity
    style={[styles.btnItemView, style]}
    onPress={onPress}
>
    <Text style={[styles.btnItemStyle, titleStyle]}>{title}</Text>
</TouchableOpacity>;

type Props = {};
export default class App extends Component<Props> {

    constructor(props) {
        super(props);
        this.state = {
            listData: [],
        };
    }

    getDeviceList = async () => {
        try {
            let deviceList = await RNBluetoothPrinter.scanForPeripherals();
            console.log('success---->', deviceList);
        } catch (e) {
            console.log('error---->', e);
        }
    };

    onPresOpenBlueTooth = () => {
        RNBluetoothPrinter.openBluetooth();
    };

    onPresCloseBlueTooth = () => {
        RNBluetoothPrinter.closeBluetooth();
    };



    render() {
        let {listData} = this.state;
        return (
            <View style={styles.container}>
                <Button
                    title={'开启蓝牙'}
                    style={styles.btnItemView}
                    titleStyle={styles.btnItemStyle}
                    onPress={this.onPresOpenBlueTooth}
                />
                <Button
                    title={'关闭蓝牙'}
                    style={styles.btnItemView}
                    titleStyle={styles.btnItemStyle}
                    onPress={this.onPresCloseBlueTooth}
                />
                <Button
                    title={'获取设备列表'}
                    style={styles.btnItemView}
                    titleStyle={styles.btnItemStyle}
                    onPress={this.getDeviceList}
                />
                <ScrollView style={styles.scrollContent}>
                    {listData.length > 0 && listData.map((item, index) => {
                        return (
                            <View style={styles.deviceItemView} key={index}>
                                <Text style={styles.deviceName}>{item.name}</Text>
                                <Text style={styles.deviceMac}>{item.mac}</Text>
                            </View>
                        );
                    })}
                </ScrollView>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        // justifyContent: 'center',
        backgroundColor: '#f60',
    },
    scrollContent: {
        flex: 1,
    },
    btnItemView: {
        width: 200,
        height: 50,
        marginVertical: 50,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#fff',
    },
    btnItemStyle: {
        color: '#333',
        fontSize: 15,
    },
    deviceItemView: {},
    deviceName: {
        color: '#333',
    },
    deviceMac: {
        color: '#666',
    },
});